<script lang="ts">
export default {
  name: 'UpdateCourt',
};
</script>

<script setup lang="ts">
import type { FormRule, SubmitContext } from 'tdesign-vue-next';
import { MessagePlugin } from 'tdesign-vue-next';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

import { getCourtInfosById, updateCourt } from '@/api/court';
import { getVenueSelectList } from '@/api/venue';
import { useTabHook } from '@/utils/tabs';

const FORM_RULES: Record<string, FormRule[]> = {
  courtName: [{ required: true, message: '请输入场地名称', type: 'error' }],
  courtType: [{ required: true, message: '请输入场地类型', type: 'error' }],
  manager: [{ required: true, message: '请输入场地管理员', type: 'error' }],
  venueId: [{ required: true, message: '请选择关联场馆', type: 'error' }],
};

// TODO 快速生成数据
const INITIAL_DATA = {
  courtName: '',
  courtType: '',
  status: false,
  capacity: 0,
  manager: '',
  venueId: '',
  comment: '',
};

const { handleRemoveCurrentTab } = useTabHook();

const formData = ref({ ...INITIAL_DATA });

const onSubmit = async (ctx: SubmitContext) => {
  if (ctx.validateResult === true) {
    const res = await updateCourt({ ...formData.value });
    if (res) {
      await MessagePlugin.success('新建场地成功');
      handleRemoveCurrentTab();
    } else {
      await MessagePlugin.error('新建场地失败');
    }
  }
};

const onReset = async () => {
  await MessagePlugin.info('取消更新');
  handleRemoveCurrentTab();
};

const venueOptions = ref([]);
const loading = ref(false);

const initVenueOptions = async (venueName = '') => {
  const res = await getVenueSelectList({ venueName, pageSize: 10, pageIndex: 1 });
  const { list = [] } = res;
  venueOptions.value = list || [];
};

const handleSearchVenue = async (value: string) => {
  loading.value = true;
  try {
    await initVenueOptions(value);
  } catch (err) {
    console.log('err', err);
  }
  loading.value = false;
};

onMounted(() => {
  initVenueOptions();
});

const route = useRoute();
const initPageData = async () => {
  const { courtId } = route.query;
  if (!courtId) {
    MessagePlugin.warning('参数错误, venueId不能为空');
  }
  const res = await getCourtInfosById(courtId as string);
  if (res) {
    formData.value = { ...formData.value, ...res };
    MessagePlugin.success('获取场馆信息成功');
  } else {
    MessagePlugin.error('获取场馆信息失败');
  }
};

onMounted(() => {
  initPageData();
});
</script>

<template>
  <t-form
    ref="form"
    class="base-form"
    :data="formData"
    :rules="FORM_RULES"
    label-align="right"
    :label-width="100"
    @reset="onReset"
    @submit="onSubmit"
  >
    <div class="form-basic-container">
      <div class="form-basic-item">
        <div class="form-basic-container-title">场馆基本信息</div>
        <t-row class="row-gap" :gutter="[32, 24]">
          <t-col :span="6">
            <t-form-item label-align="top" label="场地名称" name="venueName">
              <t-input v-model="formData.courtName" placeholder="请输入场馆名称" />
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item label-align="top" label="场馆类型" name="address">
              <t-input v-model="formData.courtType" type="text" placeholder="请输入场馆地址" />
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item label-align="top" label="场地容量" name="status">
              <t-input v-model="formData.capacity" type="number"></t-input>
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item label-align="top" label="管理员" name="status">
              <t-input v-model="formData.manager" type="text" maxlength="20" clearable></t-input>
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item label-align="top" label="是否启用" name="status">
              <t-switch v-model="formData.status"></t-switch>
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item label-align="top" label="关联场馆" name="status">
              <t-select
                v-model="formData.venueId"
                filterable
                placeholder="请选择关联场馆"
                :options="venueOptions"
                :loading="loading"
                @search="handleSearchVenue"
              ></t-select>
            </t-form-item>
          </t-col>
        </t-row>
        <div class="form-basic-container-title form-title-gap">其他信息</div>
        <t-form-item label-align="top" label="备注" name="comment">
          <t-textarea v-model="formData.comment" :height="124" placeholder="请输入备注信息" />
        </t-form-item>
      </div>
    </div>

    <div class="form-submit-container">
      <div class="form-submit-sub">
        <div class="form-submit-left">
          <t-button theme="primary" class="form-submit-confirm" type="submit"> 保存</t-button>
          <t-button type="reset" class="form-submit-cancel" theme="default" variant="base"> 取消</t-button>
        </div>
      </div>
    </div>
  </t-form>
</template>

<style lang="less" scoped>
.form-basic-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--td-bg-color-container);
  border-radius: var(--td-radius-medium) var(--td-radius-medium) 0 0;
  padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl) 80px var(--td-comp-paddingLR-xxl);

  @media (max-width: @screen-sm-max) {
    padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xl) 80px var(--td-comp-paddingLR-xl);

    .form-basic-container-title {
      margin: 0 0 var(--td-comp-margin-xxxl) 0;
    }
  }

  .form-basic-item {
    width: 676px;

    .form-basic-container-title {
      font: var(--td-font-title-large);
      font-weight: 400;
      color: var(--td-text-color-primary);
      margin: var(--td-comp-margin-xxl) 0 var(--td-comp-margin-xl) 0;
    }

    .form-title-gap {
      margin: calc(var(--td-comp-margin-xxl) * 2) 0 var(--td-comp-margin-xl) 0;
    }
  }
}

.form-submit-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--td-comp-paddingLR-xl);
  padding-bottom: var(--td-comp-paddingLR-xl);
  background-color: var(--td-bg-color-secondarycontainer);
  border-bottom-left-radius: var(--td-radius-medium);
  border-bottom-right-radius: var(--td-radius-medium);
  border-top: 1px solid var(--td-component-stroke);

  .form-submit-sub {
    width: 676px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .form-submit-left {
      .form-submit-upload-span {
        font-size: 14px;
        line-height: 22px;
        color: var(--td-text-color-placeholder);
        padding-top: 8px;
        display: inline-block;
      }
    }
  }
}
</style>
